@import '../_theme.less';

.ripple (@clr: rgba(0, 0, 0, 0.1)) {
  &::before {
    position: absolute;
    content: ' ';
    left: 0;
    top: 0;
    width: 100%;
    height: 200%;
    transition: all @duration-normal @ease-out-quad;
    z-index: auto;
    // border-radius: 0 0 50% 50%;
    // visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
    background-color: @clr;
  }

  &-hover {
    &::before {
      opacity: 1;
      transform: translateX(0);
    }
  }
}
